<script setup lang="ts">
import { getWordDetail, type WordDetail, type Sentence, type WordDetailResponseData } from '@/api/words';
import { reactive } from 'vue';
import TagComponent from './TagComponent.vue';


const state = reactive({
  wordDetails: [] as WordDetail[],
  sentences : [] as Sentence[],
  tags : [] as string[]
})

const props = defineProps<{
  word: string
}>()

getWordDetail(props.word).then((res : WordDetailResponseData) => {
    state.wordDetails = res.data.wordDetails
    state.sentences = res.data.sentences
    state.tags = res.data.tags
})

const play = () => {
    // 1. 创建一个“话语”对象
    const utterance = new SpeechSynthesisUtterance(props.word);
    // 2. 可选：配置语音参数
    utterance.rate = 1.0; // 语速：0.1 到 10，默认1
    utterance.pitch = 1.0; // 音调：0 到 2，默认1
    utterance.volume = 1.0; // 音量：0 到 1，默认1
    utterance.lang = 'zh-CN'; // 语言
    // 3. 开始朗读
    speechSynthesis.speak(utterance);
}
</script>

<template>
    <h1>{{ props.word }}</h1>

    <el-icon><Headset  @click="play"/></el-icon>

    <TagComponent v-if="state.tags != null" :tags="state.tags"/>

    <h3>翻译</h3>
    <el-table :data="state.wordDetails" style="width: 100%">
        <el-table-column prop="speech" label="speech" width="180" />
        <el-table-column prop="intro" label="intro" />
    </el-table>

    <div v-if="state.sentences.length > 0 ">
        <h3>例句</h3>
        <el-table :data="state.sentences" style="width: 100%">
            <el-table-column prop="sentence" label="sentence" width="600" />
            <el-table-column prop="trans" label="trans" show-overflow-tooltip="true"/>
        </el-table>
    </div>

</template>

<style>
</style>